<template>
	<div>
		<div v-if='engine==0'>
	        <Engine @openEngine='openEngine'></Engine>
	    </div>
		<div style='background: #fff' v-else>
			<div class='content-title'>日志记录</div>
			<div style='padding:35px 20px 80px 40px;min-height:500px'>
				<div v-if='logData.length'>
					<div style='display: flex' v-for='item in logData' :key='item'>
		                <div style='width:200px;padding:6px 16px;border-right:1px solid #e3e8ee;display: flex'>
		                    <!-- <div style='width:58px;height:22px;border:1px solid #06a0fd;border-radius: 3px;margin-right: 24px;text-align: center'>
		                        <div style='transform:scale(0.833);color:#06a0fd;line-height: 22px;'>{{item.method}}</div>      
		                    </div>  -->
		                    <!-- <div>{{format(item.created_at)}}</div>         -->
		                    <div>{{item.created_at}}</div>        
		                </div>
		                <div style='flex:1;font-size:14px;color:#657180;padding:6px 24px 6px 60px'>
		                    <div style="word-break: break-all" v-if="!item.pre">{{item.message}}</div>
		                    <div style="" v-if="item.pre"><pre style='white-space: pre-wrap;word-break:break-all'>{{item.message}}</pre></div>
		                </div>         
		            </div>
				</div>
				
		    	<Row style="text-align: center;margin-top:120px" v-else>
		            <Row>
		                <Col :span="8">&nbsp;</Col>
		                <Col :span="8">
		                	<Icon type="android-notifications-none" color="#39f" size="93"></Icon>
		                </Col>
		            </Row>
		            <Row style="margin-top: 12px;">
		                <Col :span="8">&nbsp;</Col>
		                <Col :span="8">
		                	暂无记录</a>
		                </Col>
		            </Row>
		        </Row>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	import Engine from './engine.vue'
	export default{
        components:{
            Engine
        },
		data(){
			return{
				logData:[],
				socket:{},
				engine:1
			}
		},
		created(){
			this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
		 	let BaasToken = localStorage.getItem('BaasToken');
			let Token = localStorage.getItem('Token');
			this.socket = io.connect('https://socket.dev.qingful.com?BaasToken=' + BaasToken + '&Token=' + Token);
			// this.socket = io.connect('http://192.168.31.13:8004?BaasToken=' + BaasToken + '&Token=' + Token);
			this.socket.on('log', data => {
				let _data = JSON.parse(data);
				let now = this.format(new Date());
				// console.log(_data)
				// console.log(typeof _data.message)

				this.logData.push(Object.assign({created_at:now,message: _data.message}, typeof _data.message === "string" ? {pre: false} : {pre: true}));

			});
			this.getData();
		},
		destroyed(){
			this.socket.disconnect();
		},
		methods:{
			getData(){
				this.fetch('/home/app/engine/enginStatus').then(res=>{
					if(res&&res.data.data){
						this.engine = res.data.data.engine;
					}
				})
			},
			//开通云引擎
            openEngine(){
                this.fetch('/home/app/engine/switch?engine=1').then(res=>{
                    if(res&&res.data.data){
                        this.getData();
                    }
                })
            },
			// isJSON(str) {
			// 	console.log(2);
			// 	console.log(str);
	  //           try {
	  //               JSON.parse(str);
	  //               console.log(3)
	  //               return true;
	  //           } catch(e) {
	  //           	console.log(4)
	  //               return false;
	  //           }
		 // 	},
		   	
		 // 	isJSON (str, pass_object) {
			//   if (pass_object && isObject(str)) return true;

			//   if (!isString(str)) return false;

			//   str = str.replace(/\s/g, '').replace(/\n|\r/, '');

			//   if (/^\{(.*?)\}$/.test(str))
			//     return /"(.*?)":(.*?)/g.test(str);

			//   if (/^\[(.*?)\]$/.test(str)) {
			//     return str.replace(/^\[/, '')
			//       .replace(/\]$/, '')
			//       .replace(/},{/g, '}\n{')
			//       .split(/\n/)
			//       .map(function (s) { return isJSON(s); })
			//       .reduce(function (prev, curr) { return !!curr; });
			//   }

			//   return false;
			// }　

		}
		
	}
</script>